<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>toast</title>
</head>
<style media="screen">
    @keyframes fadeIn {
        0%    {opacity: 0}
        100%  {opacity: 1}
    }

    @keyframes fadeOut {
        0%    {opacity: 1}
        100%  {opacity: 0}
    }
    #toast{
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 3rem;
        text-align: center;
        line-height: 1;
        padding:10px;
        border-radius: 3px;
        position: absolute;
        margin-left: 20%;
        left: 20%;
        top: 30%;
        transform: translate(-50%,-50%);
        z-index: 9999;
        width: 30rem;
        height: 6rem;
    }
    .hide{
        display: none;
    }
    .fadeOut{
        animation: fadeOut .5s;
    }
    .fadeIn{
        animation:fadeIn .5s;
    }
</style>
<div id="toast" class="fadeOut hide">提交成功</div>
<body></body>
<script>
    var toast = function(params){
        var el = document.createElement("div");
        el.setAttribute("id","toast");
        el.innerHTML = params.message;
        document.body.appendChild(el);
        el.classList.add("fadeIn");
        setTimeout(function(){
            el.classList.remove("fadeIn");
            el.classList.add("fadeOut");
            el.addEventListener("animationend", function(){
                el.classList.add("hide");
            });
        },params.time);
    };

    //使用
    toast({
        message:"提交成功",
        time:1500
    });


    /*------------------------
      author:codeTnt
      date:2018/7/13
     -------------------------*/
</script>
</html>

